<template>
  <div @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)" @scroll="($event)"
  class="scroll" :style="{transform:'translateY('+ top +'px)'}">
    <div class="loading">加载中。。。。。</div>
    <ul>
      <li style="height: 100px;" v-for="item in listdata">
        {{item.name}}
      </li>
    </ul>
  </div>
</template>
<script type="text/javascript">
export default {
  data(){
    return {
      listdata: [
        {name: '11最后发言',type:'last_msg_date',up:'desc'},
        {name: '222总发言',type:'msg_count',up:'normal'},
        {name: '333入群时间',type:'join_date',up:'normal'},
      ],
      list2: [
        {name: 1},
        {name: 2},
        {name: 3},
        {name: 4},
        {name: 5},
        {name: 6},
        {name: 7},
        {name: 8},
        {name: 9}
      ],
      top: 0,
      defaulttop: 40,
      diff: 0,
      startY: 0,
      isLoading: false
    }
  },
  methods: {
    touchStart(e){
      if(this.isLoading) return;
      this.startY = e.touches[0].pageY;
    },
    touchMove(e){
      let startMY = e.touches[0].pageY;
      this.diff = startMY - this.startY;
      if (this.top > 0) e.preventDefault()
      this.top = this.diff;
    },
    touchEnd(e){
      this.top = this.isLoading ? 40 : 0;
      if(!this.isLoading ){
        this.adddata();
      }
    },

    //向列表添加数据
    adddata(){
      var _this = this;
      _this.isLoading = true;
      _this.top = 40;
      setTimeout(function(){
        console.log(3000)
        _this.isLoading = false;
        _this.top = 0;
        _this.listdata = _this.listdata.concat(_this.list2)
      },3000)
    },

    vscroll(e){
      console.log(22)
    }
  }
}
</script>
<style type="text/css" lang="sass">
.scroll{
  margin-top: -40px;
}
.loading{
  height: 40px;
  line-height: 40px;
  text-align: center;
}
</style>

















